<template>
    <div class="background">
        <div class="img1">
            <van-image width="60vw" fit  :src="jingnuo" />
        </div>
        <div class="img2">
            <van-image width="25vw" fit  :src="youpin" />
        </div>
        <div class="title">
            欢迎来到靖诺优品
        </div>
        <div class="tac">
            <span class="inputdiv">
                <span style="width:10vw;vertical-align: middle;">+86</span>
                <span class="line1"></span>
                <input type="text" class="input1" v-model="mobile" placeholder="请输入手机">
            </span>
            <span class="inputdiv">
                <input :type="type" class="input2" v-model="password" placeholder="请输入密码">
                <van-image fit :src="eye" class="eye" v-if="type!='password'" @click="type='password'"></van-image>
                <van-image fit :src="eyeslash" class="eye" v-else @click="type='text'"></van-image>
            </span>
            <span style="text-align:right;width:86vw;display:inline-block;margin-top:15px">
                <span>忘记密码</span>
            </span>
            <van-button round class="login" @click="login">立即登录</van-button>
            <span class="text" style="margin-top:10px">还没有账号？<span style="color:#CF000E" @click="goRegister">立即注册</span> </span>
            <div style="margin-top:20vw;"> <input id="radio" name="radio" type="radio" checked style="transform: translateY(-10%);">已阅读并同意<span style="color:#CF000E" @click="jump(1)">《靖诺用户协议》</span>和<span style="color:#CF000E" @click="jump(2)">《隐私协议》</span> </div>
        </div>
       
    </div>
</template>

<script setup>
import jingnuo from '@image/Login/jingnuo.png'
import youpin from '@image/Login/youpin.png'
import eye from '@image/Login/eye.svg'
import eyeslash from '@image/Login/eye-slash.svg'
import { ref, reactive,onMounted } from 'vue';
import apis from '@/apis/login.js'
import { useRouter} from 'vue-router'
import { showToast } from "vant"
let mobile = ref('');
let password = ref('');
let type = ref('password');
const router=useRouter()
onMounted(() => {
    localStorage.removeItem('user');
})
let login = () => {
    
    const regex = /^1[3-9]\d{9}$/;
    if(!regex.test(mobile.value.trim())){
        showToast('请输入正确的手机号码');
        return false
    }
    if(!password.value){
        showToast('请输入密码');
        return false
    }
  try{
    apis.login({
        mobile:mobile.value,
        password:password.value
    }).then((res)=>{
        if(res.code=='200'){
            
            localStorage.setItem('user', JSON.stringify(res.data));
            router.push('/')
        }else{
            showToast(res.msg);
        }
        
    })
  }catch(e){

  }
  
}
let jump = (val) => {
    
    router.push('/Agreement?type='+val)
  
}
let goRegister = () => {
    
    router.push('/Register')
  
}
</script>

<style lang="scss" scoped>
.background{
    background-image: linear-gradient(#FFF7EA , #FFDBD6, #FFDAD5,#fff,#fff,#fff);
    height:100%;
}
.img1{
    text-align:center;
    padding-top:100px;
}
.img2{
    text-align:center;
    margin-top:-35px;
    transform:translateX(-30%)
}
.title{
    color:#333;
    font-weight:700;
    font-size:60px;
    margin-top:10px;
    transform:translateX(-12%);
    text-align:center;
}
.tac{
    text-align:center;
}
.line1{
    display:inline-block;
    width:1px;
    height:36px;
    margin:0 2vw;
    border-right:1px dotted #CDCDCD;
    vertical-align: middle;
}
.inputdiv{
    width:86vw;
    text-align:center;
    display:inline-block;
    border:1px dotted #CDCDCD;
    margin-top:30px;
    padding:10px 0
}
.input1{
    width:72vw;
    vertical-align:middle;
    background-color: transparent;
}
.input2{
    width:74vw;
    vertical-align:middle;
    background-color: transparent;
}
.eye{
    width:8vw;
    vertical-align:middle;
}
.login{
    margin-top:20vh;
    width:86vw;
    display:inline-block;
    background-image: linear-gradient(#F07748 , #ED1850);
    color:#fff;
    font-size:40px;
}
.text{
    width:86vw;
    display:inline-block;
}
</style>